<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- <title>Demo</title> -->
  <title>工会地图</title>
  <!-- Bootstrap core CSS -->
  <link href="../resource/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Custom styles for this template -->
  <link href="../resource/css/dashboard.css" rel="stylesheet" />
  <style type="text/css">
        #allmap {width:100%;height:450px;}
    </style>
  <!--    // <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9weEYM6gY4EEOWRDRpEDwIOG"></script> -->
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 </head>
 <body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed"
     data-toggle="collapse" data-target="#navbar" aria-expanded="false"
     aria-controls="navbar">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span> </button>
     <a class="navbar-brand" href="#">工会地图</a>
    </div>
   </div>
  </nav>
  <div class="container-fluid">
   <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
     <ul class="nav nav-sidebar">
      <!-- <li><a href="index.html">Overview</a></li> -->
      <li class="active"><a href="#">BaiduMap_Demo_1</a></li>
      <!-- <li><a href="backup.html">Backup</a></li> -->
     </ul>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
     <!-- <h1 class="page-header">Baidu Map</h1> -->

     <div class="clearfix" style="margin-bottom: 5px;"></div>
     <!-- 清除浮动，增加间距 -->
     <div class="row">
      <div class="col-md-8">
        <div class="panel panel-primary">
          <!-- <div class="panel-heading">
            <h3 class="panel-title"> 搜索 </h3>
          </div> -->
          <div class="panel-body">
            <form id="queryForm" class="form-inline" role="form">
              <div id="quertInput" class="form-group">
            <label for="queryName" class="control-label">名称</label>
             <input class="form-control" id="queryName" placeholder="名称" />
           </div>
            <!-- <div class="clearfix"></div>
            <div class="col-md-1"> -->
             <button type="submit" class="btn btn-primary">搜索</button>
             <div id="warningQuery" class="alert-success hide fade">
              <strong></strong>
             </div>
            <!-- </div> -->
          </form>
          </div>
        </div>
       <div id="allmap"></div>
      </div>

      <div class="col-md-4">
        <div class="panel panel-success">
          <div class="panel-heading">
            <h3 class="panel-title"> 列表 </h3>
          </div>
          <div class="panel-body" style="max-height:500px;overflow-y:scroll;" id="infoList">
            <!-- <address>
            <button type="button" class='btn btn-link' onclick="moveMapToPoint(116.404,116.404)">显示日期</button><br>
            地址：天安门<br>
            电话：1234567890<br>
            坐标：116.404,39.915<br>
            </address> -->



          </div>
        </div>
      </div>

     </div>
    </div>
   </div>
  </div>
   </body>
</html>
  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="../resource/js/jquery.min.js"></script>
  <script src="../resource/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  // 百度地图API功能

  window.onload = loadJScript;  //异步加载地图
  //百度地图API功能
  function loadJScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://api.map.baidu.com/api?v=2.0&ak=9weEYM6gY4EEOWRDRpEDwIOG&callback=init&s=1";
    document.body.appendChild(script);
  }

  var map ;
  // localStorage.clear();
  var infoArray=initInfoArray();
  function init() {
    map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    var size = new BMap.Size(20, 20);
    map.addControl(new BMap.CityListControl({
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      offset: size,
      // 切换城市之间事件
      // onChangeBefore: function(){
      //    alert('before');
      // },
      // 切换城市之后事件
      // onChangeAfter:function(){
      //   alert('after');
      // }
    }));
    updateInfoList(infoArray);
    baiduMapRefresh(map,infoArray);
  }

  //搜索按钮提交
  $("#queryForm").submit(function(e){
    if ($("#queryName").val()=="") {
      updateInfoList(infoArray);
      baiduMapRefresh(map,infoArray);
      $("#warningQuery").attr("class","alert-success hide fade");
      return false;
    }
    var keyword=$("#queryName").val();
    var resultArray=new Array();
    for (var i = 0; i < infoArray.length; i++) {
      if (infoArray[i].name.indexOf(keyword)>=0) {
        resultArray.push(infoArray[i]);
      }
    }
    $("#warningQuery").attr("class","alert-success");
    $("#warningQuery").text("共搜到"+resultArray.length+"个地点");
    updateInfoList(resultArray);
    baiduMapRefresh(map,resultArray);
    return false;
  });



  var opts = {
    width : 300,     // 信息窗口宽度
    height: 80,     // 信息窗口高度
  };

  //在地图上增加marker
  function addMarker(info){
    var coordinate=info.coordinate.split(',');
    var point = new BMap.Point(coordinate[0],coordinate[1]);
    var label = new BMap.Label(info.name,{offset:new BMap.Size(20,-10)});
    label.setStyle({
      color : "#d9534f",
      fontSize : "15px",
      backgroundColor :"0.93",
      border :"1",
      fontWeight :"bold"
    });
    var marker = new BMap.Marker(point);
    marker.setLabel(label);
    map.addOverlay(marker);
    var sContent =
  "<address><strong>"+info.name+"</strong><br>\
  "+info.address+"<br>\
  "+info.phone+"<br>\
  "+info.chairman+","+info.viceChairman+"";
  if (!isNull(info.des)) {
    sContent+="<br>"+info.des+"";
  };
  sContent+="</address>";
    var infoWindow = new BMap.InfoWindow(sContent,opts);  // 创建信息窗口对象
    marker.addEventListener("click", function(){
      this.openInfoWindow(infoWindow);
      setPanelFirst(info.infoId);
      // var selectedPanel="infoPanel_"+info.infoId;
      // $("#infoList").scrollTop($("#"+selectedPanel+"").offset().top,1000);
    });
  }

  //刷新百度地图marker
  function baiduMapRefresh(map,infoArray){
    map.clearOverlays();
    if (infoArray.length>0) {
      var coordinate=infoArray[0].coordinate.split(',');
      var point = new BMap.Point(coordinate[0],coordinate[1]);;
      map.centerAndZoom(point, 15);
    }
    for (var i = 0; i < infoArray.length; i ++) {
      addMarker(infoArray[i]);
    }
  };

  //改变列表内容
  function updateInfoList(infoArray){
    var infoHtml="";
    for (var i = 0; i < infoArray.length; i++) {
      var coordinate=infoArray[i].coordinate.split(',');
      infoHtml+="<div class='panel panel-none infoPanel' id='infoPanel_"+infoArray[i].infoId+"' \
      onclick='moveMapToPoint("+coordinate[0]+","+coordinate[1]+");\
      setPanelSelected("+infoArray[i].infoId+");'>\
      <address><a>"+infoArray[i].name+"</a><br>\
       地址："+infoArray[i].address+"<br>\
       电话："+infoArray[i].phone+"<br>\
       主席："+infoArray[i].chairman+"<br>\
       副主席："+infoArray[i].viceChairman+"<br>\
       坐标："+infoArray[i].coordinate+"<br>";
       if (!isNull(infoArray[i].des)) {
         infoHtml+="备注："+infoArray[i].des+"<br>"
       }
       infoHtml+="</address></div>";
    }
    $("#infoList").html(infoHtml);
    setPanelSelected(infoArray[0].infoId);
  }

  //改变地图中心点
  function moveMapToPoint(lng,lat){
    var point = new BMap.Point(lng,lat);
    map.centerAndZoom(point, 15);
  }

  //设置地址列表项为选中状态
  function setPanelSelected(i){
    $(".infoPanel").attr("class","panel panel-none infoPanel");
    var selectedPanel="infoPanel_"+i;
    $("#"+selectedPanel+"").attr("class","panel panel-primary infoPanel");
  }

  //把选中的信息项置顶
  function setPanelFirst(i){
    var selectedPanel="infoPanel_"+i;
    var selectedPanelHtml=$("#"+selectedPanel+"");
    $("#"+selectedPanel+"").remove();  //删除元素
    $("#infoList").prepend(selectedPanelHtml); //在被选元素的开头插入内容
    setPanelSelected(i);
  }


  //初始化数据列表
  function initInfoArray(){
    // infoArray=new Array();
    var infoJson='[\
      {    \
      "infoId":"1",\
      "name":"辽河街道总工会",\
      "address":"皇姑区宁山东路54号",\
      "chairman":"鲁广敬",\
      "viceChairman":"付立荣",\
      "phone":"86271082",\
      "coordinate":"123.439908,41.834073",\
      "des":""\
    },\
    {    \
      "infoId":"2",\
      "name":"皇姑北部经济区总工会",\
      "address":"沈阳市皇姑区黄河北大街258号",\
      "chairman":"佟瑞平",\
      "viceChairman":"史龙海",\
      "phone":"31658020",\
      "coordinate":"123.419043,41.906389",\
      "des":""\
    },\
    {    \
      "infoId":"3",\
      "name":"黄河街道总工会",\
      "address":"岐山中路13巷13号",\
      "chairman":"甄芸",\
      "viceChairman":"张国林",\
      "phone":"86845220-413",\
      "coordinate":"123.429862,41.827092",\
      "des":""\
    },\
    {    \
      "infoId":"4",\
      "name":"沈阳市皇姑区三台子街道总工会",\
      "address":"皇姑区阳山路21号",\
      "chairman":"章劲夫",\
      "viceChairman":"刘晓莉",\
      "phone":"62516129",\
      "coordinate":"123.429756,41.8872",\
      "des":""\
    },\
    {    \
      "infoId":"5",\
      "name":"皇姑区舍利塔街道总工会",\
      "address":"皇姑区汾河街54号",\
      "chairman":"夏永涛",\
      "viceChairman":"张秀峰",\
      "phone":"86723312-8011",\
      "coordinate":"123.392053,41.837607",\
      "des":""\
    },\
    {    \
      "infoId":"6",\
      "name":"观音功能区",\
      "address":"皇姑区鸭绿江街99号",\
      "chairman":"韩驰",\
      "viceChairman":"盛田子",\
      "phone":"62718826",\
      "coordinate":"123.463247,41.857187",\
      "des":""\
    },\
    {    \
      "infoId":"7",\
      "name":"沈阳市皇姑区明廉街道总工会",\
      "address":"皇姑区昆山西路119-1号",\
      "chairman":"宋新",\
      "viceChairman":"邓瑷",\
      "phone":"86870950",\
      "coordinate":"123.371608,41.837338",\
      "des":""\
    },\
    {    \
      "infoId":"8",\
      "name":"陵东街道总工会",\
      "address":"陵东街道29号",\
      "chairman":"蒋玲",\
      "viceChairman":"张铁军",\
      "phone":"86605841",\
      "coordinate":"123.449754,41.842672",\
      "des":""\
    },\
    {    \
      "infoId":"9",\
      "name":"沈阳市皇姑区北塔街道总工会",\
      "address":"皇姑区陵东街29号 陵东大厦六楼",\
      "chairman":"邹隆伟",\
      "viceChairman":"杨越童",\
      "phone":"86474367",\
      "coordinate":"123.449754,41.842672",\
      "des":""\
    }\
  ]';
    // var infoObj =  JSON.parse(infoJson); //由JSON字符串转换为JSON对象
    // alert(infoObj.des);
    // infoArray.push(infoObj);
    return JSON.parse(infoJson);
  };

  //判断值是否为空
  function isNull(value){
    if (value&&value!="") {
      return false;
    }else {
      return true;
    }
  }

</script>
